import { Add, Close, Edit, Location } from '@nutui/icons-react-taro'
import { Button, Cell, Dialog, Tag } from '@nutui/nutui-react-taro'
import { Text, View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useState } from 'react'
import Layout from '../../components/layout'
import { Address } from '../../types/index'
import './index.less'

const AddressManagement = () => {
  const [addresses, setAddresses] = useState<Address[]>([
    {
      id: 'address1',
      name: '张三',
      phone: '138****8888',
      address: '江苏省南京市江宁区东山街道文靖东路168号3单元101室',
      isDefault: true,
    },
    {
      id: 'address2',
      name: '李四',
      phone: '139****9999',
      address: '江苏省南京市鼓楼区中山北路1号2单元601室',
      isDefault: false,
    },
    {
      id: 'address3',
      name: '王五',
      phone: '136****6666',
      address: '江苏省南京市栖霞区仙林街道仙林大道100号1单元101室',
      isDefault: false,
    },
  ])

  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
  const [deleteAddressId, setDeleteAddressId] = useState<string>('')

  const handleAddAddress = () => {
    Taro.navigateTo({
      url: '/pages/edit-address/index',
    })
  }

  const handleEditAddress = (addressId: string) => {
    Taro.navigateTo({
      url: `/pages/edit-address/index?id=${addressId}`,
    })
  }

  const handleDeleteAddress = (addressId: string) => {
    setDeleteAddressId(addressId)
    setShowDeleteDialog(true)
  }

  const confirmDelete = () => {
    setAddresses((prev) => prev.filter((addr) => addr.id !== deleteAddressId))
    setShowDeleteDialog(false)
    setDeleteAddressId('')
    Taro.showToast({
      title: '删除成功',
      icon: 'success',
    })
  }

  const handleSetDefault = (addressId: string) => {
    setAddresses((prev) =>
      prev.map((addr) => ({
        ...addr,
        isDefault: addr.id === addressId,
      })),
    )
    Taro.showToast({
      title: '已设为默认地址',
      icon: 'success',
    })
  }

  const renderAddressItem = (address: Address) => (
    <Cell.Group>
      <Cell
        title={
          <View className='address-header'>
            <View className='user-info'>
              <Text className='name'>{address.name}</Text>
              <Text className='phone'>{address.phone}</Text>
            </View>
          </View>
        }
        extra={address.isDefault && <Tag type='primary'>默认</Tag>}
      />
      <Cell>
        <Text>{address.address}</Text>{' '}
      </Cell>
      <Cell
        align='center'
        title={
          address.isDefault && (
            <Button className='default-btn' onClick={() => handleSetDefault(address.id)} type='default' size='small'>
              设为默认地址
            </Button>
          )
        }
        extra={
          <View className='address-actions'>
            <Button
              className='action-btn'
              onClick={() => handleEditAddress(address.id)}
              type='default'
              size='small'
              icon={<Edit size={16} />}>
              编辑
            </Button>
            <Button
              className='action-btn'
              onClick={() => handleDeleteAddress(address.id)}
              type='default'
              size='small'
              icon={<Close size={16} />}>
              删除
            </Button>
          </View>
        }
      />
    </Cell.Group>
  )

  const renderEmptyState = () => (
    <View className='empty-state'>
      <View className='empty-icon'>
        <Location size={48} />
      </View>
      <Text className='empty-text'>暂无地址</Text>
      <Text className='empty-desc'>点击下方按钮添加新地址</Text>
    </View>
  )

  return (
    <Layout title='地址管理' showTabBar={false}>
      <View className='address-management'>
        {addresses.length > 0 ? (
          <View className='address-list'>{addresses.map(renderAddressItem)}</View>
        ) : (
          renderEmptyState()
        )}

        <Button
          className='add-address-btn'
          onClick={handleAddAddress}
          type='default'
          size='large'
          block
          icon={<Add size={20} />}>
          添加新地址
        </Button>
      </View>

      <Dialog
        visible={showDeleteDialog}
        onClose={() => setShowDeleteDialog(false)}
        onConfirm={confirmDelete}
        title='确认删除'
        content='确定要删除这个地址吗？'
        confirmText='删除'
        cancelText='取消'
      />
    </Layout>
  )
}

export default AddressManagement
